<template>
  <view class="container">
    <view class="top">
      <view class="tab">
        <view @click="tabchange('上门','邮寄快递')" :class="{active : tab, titleLeft : !tab}">{{ order ? '上门' : '邮寄快递'}}</view>
        <view @click="tabchange('到店','到店自提')" :class="{titleRight : tab, active : !tab}">{{ order ? '到店' : '到店自提'}}</view>
      </view>
      <view class="shoperInfo" @click="chooseAddress">
        <view class="left">
          <view class="area">
            <view class="areaIcon">
              <image
                v-if="tab"
                src="../../../static/business/address.png"
                mode="scaleToFill"
              />
              <view class="ownTo" v-else>
                <image
                  src="../../../static/business/shop.png"
                  mode="scaleToFill"
                />
                <view>{{ order ? '到店地址' : '自提点'}}</view>
              </view>
            </view>
            <view>
              <view class="address">
                {{ tab ? addressDetail.address : shopDetail.address_detail }}
              </view>
              <view class="telephone" v-if="tab">{{ addressDetail.consignee }} {{ addressDetail.mobile }}</view>
              <view class="telephone" v-else>营业时间：{{ shopDetail.business_time || '00:00-24:00' }}</view>
            </view>
            </view>
        </view>
        <view class="right" v-if="tab">
          <image
            src="../../../static/business/right.png"
            mode="scaleToFill"
            @click="toggle1('bottom')"
          />
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="title">
        {{ detail.name }}
      </view>
      <view class="shopName">{{ detail.introduce }}</view>
      <view class="price">￥{{ detail.price }}</view>
      <view class="order">
        <view class="orderInfo">数量</view>
        <view class="num">
          <image
            @click="num >1 ? num-- : ''"
            src="../../../static/business/reduce.png"
            mode="scaleToFill"
          />
          <view>{{ num }}</view>
          <image
            @click="num++"
            src="../../../static/business/add.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="order" v-if="order && !tab">
        <view class="orderInfo">到店时间</view>
        <view class="orderInfo" @click="chooseTime" :class="{activeTime:appointment_time,unactiveTime:!appointment_time}">
          {{ appointment_time || '请选择上门时间' }}
          <image
            class="right"
            src="../../../static/business/right.png"
            mode="scaleToFill"
            @click="toggle2('bottom')"
          />
        </view>
      </view>
      <view class="order" v-if="order && !tab">
        <view class="orderInfo">人数</view>
        <view>
          <input v-model="appointment_number" class="message" type="text" placeholder="请输入到店人数">
        </view>
      </view>
      <view class="order" v-if="order && !tab">
        <view class="orderInfo">姓名</view>
        <view>
          <input v-model="name" class="message" type="text" placeholder="请输入您的姓名">
        </view>
      </view>
      <view class="order" v-if="order && !tab">
        <view class="orderInfo">联系电话</view>
        <view>
          <input v-model="mobile" class="message" type="text" placeholder="请输入你的联系电话">
        </view>
      </view>
      <view class="order" v-if="tab && !order">
        <view class="orderInfo">配送费</view>
        <view class="price">￥{{ detail.delivery || 0 }}</view>
      </view>
      <view class="order" v-if="order && tab">
        <view class="orderInfo">上门时间</view>
        <view class="orderInfo" @click="chooseTime">
          {{ appointment_time || '请选择上门时间' }}
          <image
            v-if="!appointment_time"
            class="right"
            src="../../../static/business/right.png"
            mode="scaleToFill"
            @click="toggle2('bottom')"
          />
        </view>
      </view>
      <view class="order">
        <view class="orderInfo">订单总价</view>
        <view class="price">￥{{ (num * detail.price).toFixed(2) }}</view>
      </view>
    </view>
    <view class="bannerBtn" @click="submit">
      提交订单
    </view>
    <view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup">
				<view class="popup-content">
          <view class="head">
            <text class="chooseAddress">选择收货地址</text>
            <image
              @click="close"
              class="close"
              src="../../../static/business/close.png"
              mode="scaleToFill"
            />
          </view>
          <view style="height: 400rpx;overflow: scroll;">
            <view class="checkBox" :class="{activeCheck:choose === index,unactiveCheck:choose !== index}" v-for="(item,index) in addressLists" :key="item.id" @click="chooseAddressBox(index)">
              <view class="choosegender">
                <view class="round" :class="{activeCheck:choose === index,unactiveCheck:choose !== index}">
                  <view :class="{dot:choose === index}"></view>
                </view>
                <view class="checkAddress" :class="{activeText:choose === index,unactiveText:choose !== index}">
                  <view>{{ item.address }}</view>
                  <view>{{ item.consignee }} {{ item.mobile }}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="addBtn" @click="addAddress">
            <image
              class="add"
              src="../../../static/business/Increase.png"
              mode="scaleToFill"
            />
            新增收货地址
          </view>
        </view>
			</uni-popup>
      <uni-popup ref="popupTime">
        <Picker
          :list="list"
          @close="closeTime"
          @change="changeTime"
        />
      </uni-popup>
		</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { goodsDetail, addressList, orderCreate } from '@/service/index.ts'
import Picker from '@/components/Picker/index.vue'

// 商品详情
const detail = ref({})
// 店面详情
const shopDetail = ref({})
// 订单类型
const orderType = ref('1')
onLoad((options) => {
  console.log(options);
  orderType.value = options.type
  order.value = options.type === '1' ? false : true
  getAddressList()
  goodsDetail({id: options.id}).then(res => {
    detail.value = res.goods
    shopDetail.value = res.shop
  })
})

// 物品数量
const num = ref(1)

// tab切换
const tab = ref(true)
// 提交订单类型
const order = ref(true)

const popup = ref(null)
const toggle1 = (type) => {
	popup.value.open(type)
}
const toggle2 = (type) => {
  console.log(type);
}
const close = () => {
	popup.value.close()
}

// 上门时间
const appointment_time = ref('')
// 上门时间传递的列表
const list = ref([])
// 上门时间弹窗
const popupTime = ref(null)
// 上门时间列表
const timeList = ref([
  {
    code: 1,
    name:'00:00-01:00'
  },
  {
    code: 2,
    name:'01:00-02:00'
  },
  {
    code: 3,
    name:'02:00-03:00'
  },
  {
    code: 4,
    name:'03:00-04:00'
  },
  {
    code: 5,
    name:'04:00-05:00'
  },
  {
    code: 6,
    name:'05:00-06:00'
  },
  {
    code: 7,
    name:'06:00-07:00'
  },
  {
    code: 8,
    name:'07:00-08:00'
  },
  {
    code: 9,
    name:'08:00-09:00'
  },
  {
    code: 10,
    name:'09:00-10:00'
  },
  {
    code: 11,
    name:'10:00-11:00'
  },
  {
    code: 12,
    name:'11:00-12:00'
  },
  {
    code: 13,
    name:'12:00-13:00'
  },
  {
    code: 14,
    name:'13:00-14:00'
  },
  {
    code: 15,
    name:'14:00-15:00'
  },
  {
    code: 16,
    name:'15:00-16:00'
  },
  {
    code: 17,
    name:'16:00-17:00'
  },
  {
    code: 18,
    name:'17:00-18:00'
  },
  {
    code: 19,
    name:'18:00-19:00'
  },
  {
    code: 20,
    name:'19:00-20:00'
  },
  {
    code: 21,
    name:'20:00-21:00'
  },
  {
    code: 22,
    name:'21:00-22:00'
  },
  {
    code: 23,
    name:'22:00-23:00'
  },
  {
    code: 24,
    name:'23:00-24:00'
  }
])
// 选择上门时间
const chooseTime = () => {
  list.value = []
  popupTime.value.open('bottom')
  appointment_time.value = getFutureDates()[0].name + ' ' + timeList.value[0].name
  list.value.push(getFutureDates())
  list.value.push(timeList.value)
}
// 关闭上门时间弹窗
const closeTime = () => {
  popupTime.value.close()
}
const week = ref({
  0: '周日',
  1: '周一',
  2: '周二',
  3: '周三',
  4: '周四',
  5: '周五',
  6: '周六'
})
// 获取上门日期列表
const getFutureDates = () => {
  const dates = [];
  const today = new Date();
  const endDate = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());

  while (today < endDate) {
    const dateObj = {
      code: today.getDay(), // 0-6, Sunday-Saturday
      name: `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}(${week.value[today.getDay()]})`
    };
    dates.push(dateObj);
    today.setDate(today.getDate() + 1);
  }

  return dates;
}
// 选择上门时间
const changeTime = (e) => {
  console.log(e);
  appointment_time.value = `${list.value[0][e[0][0]].name} ${list.value[1][e[0][1]].name}`
}
// 选择地址
const choose = ref(0)
// 选择地址
const chooseAddress = () => {
  if(tabTitle.value !== '上门') return
  popup.value.open('bottom')
}
// 新增地址
const addAddress = () => {
  console.log(1);
  uni.navigateTo({
    url: '/pages/business/address/index'
  })
}
// 地址详情
const addressDetail = ref({})
// 地址列表
const addressLists = ref([])
// 获取地址列表
const getAddressList = () => {
  addressList().then(res => {
    addressLists.value = res
    addressDetail.value = res.find(item => item.is_default === 1) || res[0]
    choose.value = res.findIndex(item => item.is_default === 1) === -1 ? 0 : res.findIndex(item => item.is_default === 1)
    console.log(choose.value);
  })
}
// 选择具体地址
const chooseAddressBox = (index) => {
  choose.value = index
  addressDetail.value = addressLists.value[index]
}
// tab标题
const tabTitle = ref('上门')
// tab切换
const tabchange = (a,b) => {
  tab.value = !tab.value
  if(a === '上门' || a === '邮寄快递') {
    tabTitle.value = a
    num2.value = num.value
    num.value = num1.value
    appointment_time2.value = appointment_time.value
    appointment_time.value = appointment_time1.value
  } else {
    tabTitle.value = b
    num1.value = num.value
    num.value = num2.value
    appointment_time1.value = appointment_time.value
    appointment_time.value = appointment_time2.value
  }
  console.log(tabTitle.value);
}
// 切换中数据持久化
const num1 = ref(1)
const num2 = ref(1)
const appointment_time1 = ref('')
const appointment_time2 = ref('')
// 提交订单的参数
const number = ref(1)
const address = ref('')
const mobile = ref('')
const name = ref('')
const appointment_number = ref()

// 提交订单
const submit = () => {
  if(tab.value) {
    if(!addressDetail.value) {
      uni.showToast({
        title: '请选择地址',
        icon: 'none'
      })
      return
    }
    if(order.value){
      if(!appointment_time.value) {
        uni.showToast({
          title: '请选择上门时间',
          icon: 'none'
        })
        return
      }
    }
    orderCreate({
      goods_id: detail.value.shop_id,
      type: order.value ? 3 : 1,
      number: num.value,
      address: addressDetail.value.address,
      mobile: mobile.value || addressDetail.value.mobile,
      name: name.value || addressDetail.value.consignee,
      appointment_time: appointment_time.value,
      appointment_number: appointment_number.value
    }).then(res => {
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
      uni.navigateTo({
        url: '/pages/Pay/Pay'
      })
    })
  } else {
    if(!addressDetail.value) {
      uni.showToast({
        title: '请选择地址',
        icon: 'none'
      })
      return
    }
    if(order.value){
      if(!appointment_time.value) {
        uni.showToast({
          title: '请选择到店时间',
          icon: 'none'
        })
        return
      }
      if(!appointment_number.value) {
        uni.showToast({
          title: '请输入到店人数',
          icon: 'none'
        })
        return
      }
      if(!name.value) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      if(!mobile.value) {
        uni.showToast({
          title: '请输入联系电话',
          icon: 'none'
        })
        return
      }
      if(!/^1[3456789]\d{9}$/.test(mobile.value)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
    }
    console.log({
      goods_id: detail.value.shop_id,
      type: order.value ? 4 : 2,
      number: num.value,
      address: addressDetail.value.address,
      mobile: mobile.value || addressDetail.value.mobile,
      name: name.value || addressDetail.value.consignee,
      appointment_time: appointment_time.value,
      appointment_number: appointment_number.value
    });
    orderCreate({
      goods_id: detail.value.shop_id,
      type: order.value ? 4 : 2,
      number: num.value,
      address: addressDetail.value.address,
      mobile: mobile.value || addressDetail.value.mobile,
      name: name.value || addressDetail.value.consignee,
      appointment_time: appointment_time.value,
      appointment_number: appointment_number.value
    }).then(res => {
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
      uni.navigateTo({
        url: '/pages/Pay/Pay'
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: $body-bc;
  color: $content-color;
  padding: 30rpx 28rpx 200rpx;
  .top {
    background: #112959;
    border-radius: 20rpx;
    margin-bottom: 27rpx;
    .tab {
      display: flex;
      .titleRight {
        flex: 1;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 26rpx;
        color: #112959;
        line-height: 64rpx;
        background: #3A75C0;
        text-align: center;
        border-radius: 0rpx 20rpx 0rpx 0rpx;
      }
      .titleLeft {
        flex: 1;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 26rpx;
        color: #112959;
        line-height: 64rpx;
        background: #3A75C0;
        text-align: center;
        border-radius: 20rpx 0rpx 0rpx 0rpx;
      }
      .active {
        flex: 1;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        height: 80rpx;
        color: #3A75C0;
        line-height: 64rpx;
        background: #112959;
        text-align: center;
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        margin-top: -16rpx;
        padding-top: 16rpx;
        box-sizing: border-box;
      }
    }
    .shoperInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 37rpx 28rpx 39rpx 26rpx;
      .left {
        .area {
          display: flex;
          image {
            width: 24rpx;
            height: 24rpx;
            margin-top: 7rpx;
          }
          .areaIcon {
            margin-right: 25rpx;
            flex: 1;
          }
          .ownTo {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: FZLanTingHeiS-R-GB;
            font-weight: 400;
            font-size: 20rpx;
            color: #00C1FF;
            line-height: 37rpx;
            white-space: nowrap;
          }
        }
        .address {
          font-family: FZLanTingHeiS-R-GB;
          font-weight: 400;
          font-size: 30rpx;
          color: #3A75C0;
          line-height: 40rpx;
          margin-bottom: 12rpx;
        }
        .telephone {
          font-family: FZLanTingHeiS-R-GB;
          font-weight: 400;
          font-size: 26rpx;
          color: #3A75C0;
          line-height: 37rpx;
        }
      }
      .right {
        image {
          width: 11rpx;
          height: 20rpx;
          margin-left: 44rpx;
        }
      }
    }
  }
  .bottom {
    padding: 30rpx 26rpx 10rpx;
    background: #112959;
    border-radius: 20rpx;
    .title {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 22rpx;
      color: #3A75C0;
      line-height: 48rpx;
    }
    .shopName {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 34rpx;
      color: #00C1FF;
      line-height: 48rpx;
    }
    .num {
      display: flex;
      justify-content: space-between;
      align-items: center;
      image {
        width: 36rpx;
        height: 36rpx;
        margin: 0 10rpx;
      }
    }
    .price {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 28rpx;
      color: #F25C01;
      line-height: 48rpx;
    }
    .order {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #1D4374;
      .right {
        width: 11rpx;
        height: 21rpx;
      }
    }
    .order:last-child {
      border: none;
    }
    .orderInfo {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 28rpx;
      color: #3A75C0;
      line-height: 100rpx;
    }
  }
  .bannerBtn {
    position: fixed;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    background: url('../../../static/business/order.png') center center no-repeat;
    background-size: 100%;
    width: 560rpx;
    font-family: FZLanTingHeiS-R-GB;
    font-weight: 400;
    font-size: 30rpx;
    color: #00C1FF;
    line-height: 104rpx;
    text-align: center;
  }
  .popup-content {
		background: #112959;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 26rpx 39rpx 126rpx;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      .chooseAddress {
        padding-left: 25rpx;
        font-family: FZLanTingHeiS-R-GB;
        font-weight: 400;
        font-size: 32rpx;
        color: #3A75C0;
        line-height: 70rpx;
      }
      .close {
        width: 30rpx;
        height: 30rpx;
      }
    }
    .addBtn {
      position: fixed;
      bottom: 40rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 622rpx;
      height: 80rpx;
      background: #00C1FF;
      border-radius: 20rpx;
      font-family: FZLanTingHeiS-R-GB;
      font-weight: 400;
      font-size: 28rpx;
      color: #112959;
      line-height: 42rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .add {
        width: 34rpx;
        height: 34rpx;
        margin-right: 10rpx;
      }
    }
	}
  .round {
    position: relative;
    width: 36rpx;
    height: 36rpx;
    background: rgba(244,102,38,0);
    border-radius: 50%;
    margin-right: 20rpx;
  }
  .activeCheck {
    border: 1px solid #00BAFF;
    background: #112959;
    color: #00BAFF;
  }
  .unactiveCheck {
    border: 1px solid #25488E;
    background: #011434;
    color: #3A75C0;
  }
  .unactiveText {
    color: #3A75C0;
  }
  .activeText {
    color: #00BAFF;
  }
  .unactive {
    border: 1px solid #25488E;
    background: #011434;
  }

  .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20rpx;
    height: 20rpx;
    background: #00BAFF;
    border-radius: 50%;
  }
  .checkBox {
    height: 148rpx;
    border-radius: 20rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    margin: 7rpx 0;
    .choosegender {
      display: flex;
      height: 100%;
      align-items: center;
      margin: 0 5rpx;
    }
    .checkAddress {
      flex: 1;
      font-family: FZLanTingHeiS-R-GB;
      font-weight: 400;
      font-size: 28rpx;
      // color: #3A75C0;
      line-height: 42rpx;
    }
  }
  .message {
    text-align: end;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #00C1FF;
    line-height: 100rpx;
  }
  .message::placeholder {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #3A75C0;
    line-height: 100rpx;
  }
  .activeTime {
    color: #00BAFF;
  }
  .unactiveTime {
    color: #3A75C0;
  }
}
</style>
